<div class="d-flex flex-column horizontal-expand mb-3">
  <div class="container-fluid d-flex justify-content-center bg-primary m-1">
    <h3 class="py-2">RCON Tool</h3>
  </div>
  <div class="d-flex flex-column horizontal-expand justify-content-between">
    <!-- Target Host -->
    <div class="d-flex justify-content-between horizontal-expand bg-light m-1">
      <div class="p-2 col-2">Target Host</div>
      <div class="p-2 col">
        <input id="target_host_input" type="text" class="form-control" placeholder="127.0.0.1">
      </div>
    </div>

    <!-- RCON Port -->
    <div class="d-flex justify-content-between horizontal-expand bg-light m-1">
      <div class="p-2 col-2">Port</div>
      <div class="p-2 col">
        <input id="server_rcon_port_input" type="text" class="form-control" placeholder="<%= @config['server_rcon_port'] %>">
      </div>
    </div>

    <!-- Server Password -->
    <div class="d-flex justify-content-between horizontal-expand bg-light m-1">
      <div class="p-2 col-2">Password</div>
      <div class="p-2 col">
        <input id="server_password_input" type="text" class="form-control blur" placeholder="<%= @config['server_rcon_password'] %>">
      </div>
      <div class="p-2 col-2">
        <button id="server_password_input_revealer" type="button" class="btn btn-success horizontal-expand mr-4" onclick="revealHide('#server_password_input', '#server_password_input_revealer');">Reveal</button>
      </div>
    </div>

    <!-- Command -->
    <div class="d-flex justify-content-between horizontal-expand bg-light m-1">
      <div class="p-2 col-2">Command</div>
      <div class="p-2 horizontal-expand">
        <input id="rcon_input" type="text" class="form-control horizontal-expand" placeholder="help">
      </div>
      <div class="p-2">
        <div class="d-flex justify-content-between">
          <button type="button" class="btn btn-secondary m-1" onclick="$('#rcon_input').val('');">Clear</button>
          <button type="button" class="btn btn-info m-1" onclick="
          if ($('#rcon_input').val() || $('#rcon_input').attr('placeholder')) {
            tailProcess('#rcon-log',
              '/rcon', 1000,
                {'command': $('#rcon_input').val() || $('#rcon_input').attr('placeholder'),
                 'host': $('#target_host_input').val() || $('#target_host_input').attr('placeholder'),
                 'port': $('#server_rcon_port_input').val() || $('#server_rcon_port_input').attr('placeholder'),
                 'pass': $('#server_password_input').val() || $('#server_password_input').attr('placeholder')});}">Send</button>
        </div>
      </div>
    </div>

    <!-- RCON Log -->
    <div class="d-flex flex-column justify-content-start horizontal-expand my-1 py-2 bg-light">
      <div class="ml-4 p-2 horizontal-expand">RCON Log</div>
      <div class="ml-4 p-2 horizontal-expand"><button type="button" class="font-weight-bold btn btn-info btn" onclick="resetLogScroll('#rcon-log', true);">Tail</button></div>
      <pre id='rcon-log' class="log log-lg d-flex flex-column log-content">
      </pre>
    </div>
  </div>
</div>
